<template>
  <view class="container">
    <view class="amount-box">
      <text class="label">支付金额</text>
      <text class="amount">¥{{amount}}</text>
    </view>
    
    <view class="payment-methods">
      <view class="section-title">支付方式</view>
      <view class="method-list">
        <view 
          class="method-item" 
          :class="{ active: selectedMethod === 1 }"
          @tap="selectMethod(1)"
        >
          <view class="method-icon">
            <text class="icon">💳</text>
          </view>
          <view class="method-info">
            <text class="method-name">微信支付</text>
            <text class="method-desc">推荐使用微信支付</text>
          </view>
          <text class="check-icon" v-if="selectedMethod === 1">✓</text>
        </view>
        
        <view 
          class="method-item" 
          :class="{ active: selectedMethod === 2 }"
          @tap="selectMethod(2)"
        >
          <view class="method-icon">
            <text class="icon">💰</text>
          </view>
          <view class="method-info">
            <text class="method-name">支付宝支付</text>
            <text class="method-desc">支付宝安全支付</text>
          </view>
          <text class="check-icon" v-if="selectedMethod === 2">✓</text>
        </view>
      </view>
    </view>
    
    <view class="order-info">
      <view class="section-title">订单信息</view>
      <view class="info-item">
        <text class="label">订单编号</text>
        <text class="value">{{orderNo}}</text>
      </view>
      <view class="info-item">
        <text class="label">创建时间</text>
        <text class="value">{{createTime || '- -'}}</text>
      </view>
    </view>
    
    <view class="footer">
      <button class="pay-btn" @tap="submitPay" :disabled="!selectedMethod">
        确认支付 ¥{{amount}}
      </button>
    </view>
  </view>
</template>

<script>
import { userApi } from '@/api'

export default {
  data() {
    return {
      orderNo: '',
      amount: '0.00',
      createTime: '',
      selectedMethod: 1 // 默认选择微信支付
    }
  },
  onLoad(options) {
    if (options.orderNo) {
      this.orderNo = options.orderNo
    }
    if (options.amount) {
      this.amount = Number(options.amount).toFixed(2)
    }
    if (options.createTime) {
      this.createTime = options.createTime
    }
  },
  methods: {
    // 选择支付方式
    selectMethod(method) {
      this.selectedMethod = method
    },
    
    // 提交支付
    async submitPay() {
      try {
        uni.showLoading({
          title: '支付中...'
        })
        
        const params = {
          orderNo: this.orderNo,
          payMethod: this.selectedMethod
        }
        
        await userApi.payOrder(params)
        
        uni.hideLoading()
        uni.showToast({
          title: '支付成功',
          icon: 'success'
        })
        
        // 延迟跳转到订单列表
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/order/list/index'
          })
        }, 1500)
        
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: error.message || '支付失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 120rpx;
}

.amount-box {
  background: #fff;
  padding: 60rpx 30rpx;
  text-align: center;
}

.amount-box .label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: block;
}

.amount-box .amount {
  font-size: 64rpx;
  color: #333;
  font-weight: bold;
}

.payment-methods {
  margin-top: 20rpx;
  background: #fff;
  padding: 30rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.method-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.method-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  position: relative;
}

.method-item.active {
  background: #e8f5e9;
}

.method-icon {
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.method-icon .icon {
  font-size: 40rpx;
}

.method-info {
  flex: 1;
}

.method-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
  display: block;
}

.method-desc {
  font-size: 24rpx;
  color: #999;
}

.check-icon {
  font-size: 40rpx;
  color: #4caf50;
  position: absolute;
  right: 30rpx;
}

.order-info {
  margin-top: 20rpx;
  background: #fff;
  padding: 30rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item .label {
  font-size: 26rpx;
  color: #666;
}

.info-item .value {
  font-size: 26rpx;
  color: #333;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.pay-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(to right, #4caf50, #45a049);
  color: #fff;
  font-size: 28rpx;
  border-radius: 40rpx;
  font-weight: 500;
}

.pay-btn[disabled] {
  background: #ccc;
  color: #fff;
}
</style> 